<template>
  <div class="container" v-if="createAuth">
    <!-- 头部 -->
    <page-header
      :title="
        $route.query.id ? $t('m.Edit_price_plan') : $t('m.Create_a_price_plan')
      "
      :has-return="true"
    ></page-header>

    <div class="create_div">
      <div class="create_div_title">
        <div class="create_div_title1">{{ $t('m.Price_plan_preview') }}:</div>
        <div class="create_div_title2">
          <span v-show="ruleForm.freeDuration">{{
            $t('m.billingRules1')
              .replace(
                '$order',
                ruleForm.freeDurationApplyOrderNum == '' ||
                  ruleForm.freeDurationApplyOrderNum == null
                  ? $t('m.Every_order').toLowerCase()
                  : $t(
                      'm.' + `First_order${ruleForm.freeDurationApplyOrderNum}`
                    ).toLowerCase()
              )
              .replace('$freeDuration', ruleForm.freeDuration)
              .replace(
                '$times1',
                ruleForm.freeDurationControlType == 1
                  ? ruleForm.freeDuration > 1
                    ? $t('m.minute3')
                    : $t('m.minute2')
                  : ruleForm.freeDurationControlType == 2
                  ? ruleForm.freeDuration > 1
                    ? $t('m.hour4')
                    : $t('m.hour3')
                  : ruleForm.freeDuration > 1
                  ? $t('m.days')
                  : $t('m.day')
              )
          }}</span>
          <span>{{
            $t('m.billingRules2')
              .replace(
                '$thereafter',
                ruleForm.freeDuration ? $t('m.thereafter') : ''
              )
              .replace('$currency', '')
              .replace('$amount', $format.amountFormat(ruleForm.amount))
              .replace('$cycle', $format.numberFormat(ruleForm.cycle))
              .replace(
                '$times2',
                ruleForm.controlType == 1
                  ? ruleForm.cycle > 1
                    ? $t('m.minute3')
                    : $t('m.minute2')
                  : ruleForm.controlType == 2
                  ? ruleForm.cycle > 1
                    ? $t('m.hour4')
                    : $t('m.hour3')
                  : ruleForm.cycle > 1
                  ? $t('m.days')
                  : $t('m.day')
              )
              .replace(
                '$punctuation',
                ruleForm.dayAmount ? $t('m.punctuation1') : $t('m.punctuation2')
              )
          }}</span>
          <span v-show="ruleForm.dayAmount">{{
            $t('m.billingRules3')
              .replace('$currency', '')
              .replace('$dayAmount', $format.amountFormat(ruleForm.dayAmount))
          }}</span>
          <span v-show="ruleForm.amount">{{
            $t('m.billingRules4')
              .replace('$currency', '')
              .replace(
                '$penaltyAmount',
                $format.amountFormat($cache.get('xt')['penalty-amount'])
              )
              .replace(
                '$maxRentDuration',
                $format.numberFormat(ruleForm.maxRentDuration)
              )
              .replace(
                '$times3',
                ruleForm.maxDurationControlType == 1
                  ? ruleForm.maxRentDuration > 1
                    ? $t('m.minute3')
                    : $t('m.minute2')
                  : ruleForm.maxDurationControlType == 2
                  ? ruleForm.maxRentDuration > 1
                    ? $t('m.hour4')
                    : $t('m.hour3')
                  : ruleForm.maxRentDuration > 1
                  ? $t('m.days')
                  : $t('m.day')
              )
          }}</span>
        </div>
      </div>
      <el-form class="el_form" ref="ruleForm" :model="ruleForm" :rules="rules">
        <div class="create_form_title1">
          {{ $t('m.Price_plan_description') }}*
        </div>
        <el-form-item prop="title">
          <el-input
            v-model="ruleForm.title"
            clearable
            style="width:438px"
            :placeholder="$t('m.Price_plan_description_eg')"
            maxlength="15"
          ></el-input>
        </el-form-item>
        <div class="create_form_usage">
          <img
            :src="
              disabled1
                ? require('@/assets/imgs/ic_selected@2x.png')
                : require('@/assets/imgs/ic_unselected@2x.png')
            "
            alt=""
            class="usageImg"
          />
          <div style="display:flex;align-items: center;">
            <div class="create_form_title1" style="margin-bottom:0;">
              {{ $t('m.Free_usage') }}
            </div>
            <el-tooltip
              class="item"
              effect="dark"
              :content="$t('m.Duration_during_renting')"
              placement="top-start"
            >
              <img src="@/assets/imgs/ic_mark@2x.png" alt="" class="hitImg" />
            </el-tooltip>
          </div>
        </div>
        <div class="create_form_title2">
          <div>
            {{ $t('m.Plan_step') }} 1/2: {{ $t('m.Free_usage_duration') }}
          </div>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('m.Duration_during_renting')"
            placement="top-start"
          >
            <img src="@/assets/imgs/ic_mark@2x.png" alt="" class="hitImg" />
          </el-tooltip>
        </div>
        <div style="display:flex;">
          <el-input
            v-model.number="ruleForm.freeDuration"
            maxlength="3"
            @input="changeFree"
            @clear="disabled1 = false"
            clearable
            style="width:210px;margin-right:20px;height:36px;"
            :placeholder="'5'"
          ></el-input>
          <div class="select_radio">
            <div
              class="select_radio_div"
              v-for="item in selectList1"
              :key="item.freeDurationControlType"
              :class="{
                select_radio_active: item.disabled
              }"
              @click="changeRadio1(item)"
            >
              <div
                class="select_radio_div_text"
                :class="{
                  select_radio_div_text_active: item.disabled
                }"
              >
                {{ item.label }}
              </div>
              <img
                :src="
                  item.disabled
                    ? require('@/assets/imgs/work/ic_selected.svg')
                    : require('@/assets/imgs/work/ic_unselected@2x.png')
                "
                alt=""
                width="14px"
                height="14px"
              />
            </div>
          </div>
        </div>
        <div class="create_form_title2">
          <div>
            {{ $t('m.Plan_step') }} 2/2:
            {{ $t('m.Free_usage_duration_frequency') }}
          </div>
        </div>
        <div class="select_radio">
          <div
            class="select_radio_div"
            v-for="item in selectList2"
            :key="item.freeDurationApplyOrderNum"
            :class="{
              select_radio_active: item.disabled,
              select_radio_disable: !disabled1
            }"
            @click="!disabled1 ? '' : changeRadio2(item)"
          >
            <div
              class="select_radio_div_text"
              :class="{
                select_radio_div_text_active: item.disabled
              }"
            >
              {{ item.label }}
            </div>
            <img
              :src="
                item.disabled
                  ? require('@/assets/imgs/work/ic_selected.svg')
                  : require('@/assets/imgs/work/ic_unselected@2x.png')
              "
              alt=""
              width="14px"
              height="14px"
            />
          </div>
        </div>
        <div style="display:flex;align-items: center;margin-bottom: 12px;">
          <div class="create_form_title1" style="margin-bottom: 0;">
            {{ $t('m.Rental_fees') }}*
          </div>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('m.Rental_costs_incurred')"
            placement="top-start"
          >
            <img src="@/assets/imgs/ic_mark@2x.png" alt="" class="hitImg" />
          </el-tooltip>
        </div>
        <div class="create_form_fees">
          <el-form-item prop="amount">
            <el-input
              v-model.number="ruleForm.amount"
              @input="changeAmount"
              maxlength="7"
              clearable
              style="width:210px;height:36px;"
              :placeholder="'1'"
            ></el-input>
          </el-form-item>
          <img
            src="@/assets/imgs/ic_slash@2x.png"
            alt=""
            style="margin-top:8px;width:20px;height:20px;"
          />
          <el-form-item prop="cycle">
            <el-input
              v-model.number="ruleForm.cycle"
              @input="changeCycle"
              maxlength="3"
              clearable
              style="width:210px;height:36px;margin-right:20px;"
              :placeholder="'30'"
            ></el-input>
          </el-form-item>
          <div class="select_radio">
            <div
              class="select_radio_div"
              v-for="item in selectList3"
              :key="item.controlType"
              :class="{
                select_radio_active: item.disabled
              }"
              @click="changeRadio3(item)"
            >
              <div
                class="select_radio_div_text"
                :class="{
                  select_radio_div_text_active: item.disabled
                }"
              >
                {{ item.label }}
              </div>
              <img
                :src="
                  item.disabled
                    ? require('@/assets/imgs/work/ic_selected.svg')
                    : require('@/assets/imgs/work/ic_unselected@2x.png')
                "
                alt=""
                width="14px"
                height="14px"
              />
            </div>
          </div>
        </div>
        <div style="display:flex;align-items: center;margin-bottom: 12px;">
          <div class="create_form_usage" style="margin:0;">
            <img
              :src="
                disabled2
                  ? require('@/assets/imgs/ic_selected@2x.png')
                  : require('@/assets/imgs/ic_unselected@2x.png')
              "
              alt=""
              class="usageImg"
            />
            <div class="create_form_title1" style="margin-bottom: 0;">
              {{ $t('m.Daily_cap_rule') }}
            </div>
          </div>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('m.Hit_usage_daily_cap')"
            placement="top-start"
          >
            <img src="@/assets/imgs/ic_mark@2x.png" alt="" class="hitImg" />
          </el-tooltip>
        </div>
        <el-form-item>
          <el-input
            v-model.number="ruleForm.dayAmount"
            @input="changeDayAmount"
            maxlength="7"
            @clear="disabled2 = false"
            clearable
            style="width:210px;margin-right:20px;height:36px;"
            :placeholder="'8'"
          ></el-input>
        </el-form-item>
        <!-- <div style="display:flex;align-items: center;margin-bottom: 12px;">
          <div class="create_form_title1" style="margin-bottom: 0;">
            {{ $t('m.Rental_duration_limit') }}*
          </div>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('m.Maximum_lease_duration')"
            placement="top-start"
          >
            <img src="@/assets/imgs/ic_mark@2x.png" alt="" class="hitImg" />
          </el-tooltip>
        </div>
        <div class="create_form_fees">
          <el-form-item prop="maxRentDuration">
            <el-input
              v-model="ruleForm.maxRentDuration"
              @input="changeMaxRentDuration"
              maxlength="3"
              clearable
              style="width:210px;height:36px;margin-right:20px;"
              :placeholder="'72'"
            ></el-input>
          </el-form-item>
          <div class="select_radio">
            <div
              class="select_radio_div"
              v-for="item in selectList4"
              :key="item.maxDurationControlType"
              :class="{
                select_radio_active: item.disabled
              }"
              @click="changeRadio4(item)"
            >
              <div class="select_radio_div_text"    :class="{
                select_radio_div_text_active: item.disabled
              }">{{ item.label }}</div>
              <img
                :src="
                  item.disabled
                    ? require('@/assets/imgs/work/ic_selected.svg')
                    : require('@/assets/imgs/work/ic_unselected@2x.png')
                "
                alt=""
                width="14px"
                height="14px"
              />
            </div>
          </div>
        </div> -->
      </el-form>
    </div>

    <div class="create_button">
      <el-button class="el_button" @click="saveBtn()" type="primary">{{
        $t('m.save')
      }}</el-button>
    </div>
  </div>
</template>

<script>
// import PageHeader from '@/common/module/page-header.vue'
// import share from '@/mixins/share'
export default {
  // components: { PageHeader },
  // mixins: [share],
  // inject: ['reload'],
  data () {
    return {
      lang: this.$t('m'),
      ruleForm: {
        title: '', //	标题
        freeDuration: 5, // 免费时长（分）
        freeDurationControlType: 1, // 免费时长期限类型：1-分 2-小时 3-天
        freeDurationApplyOrderNum: null, // 免费限制：null/空表示不限制
        amount: 1, // 计费费用
        id: null,
        cycle: 30, // 计费周期
        controlType: 1, // 	计费周期期限类型：1-分 2-小时 3-天
        dayAmount: 8, //	每日封顶费用
        maxDurationControlType: 2, //	最大租借时长期限类型：1-分 2-小时 3-天
        maxRentDuration: 72 //	最大租借时长
      },
      rules: {
        title: [
          {
            required: true,
            message: this.$t('m.This_field_required'),
            trigger: 'blur'
          }
        ],
        amount: [
          {
            required: true,
            message: this.$t('m.This_field_required'),
            trigger: 'blur'
          }
        ],
        cycle: [
          {
            required: true,
            message: this.$t('m.This_field_required'),
            trigger: 'blur'
          }
        ],
        maxRentDuration: [
          {
            required: true,
            message: this.$t('m.This_field_required'),
            trigger: 'blur'
          }
        ]
      },
      //免费时长期限类型
      selectList1: [
        {
          freeDurationControlType: 1,
          label: this.$t('m.minute'),
          disabled: true
        },
        {
          freeDurationControlType: 2,
          label: this.$t('m.hour'),
          disabled: false
        },
        {
          freeDurationControlType: 3,
          label: this.$t('m.day2'),
          disabled: false
        }
      ],
      //免费限制-类型
      selectList2: [
        {
          freeDurationApplyOrderNum: null,
          label: this.$t('m.Every_order'),
          disabled: true
        },
        {
          freeDurationApplyOrderNum: 1,
          label: this.$t('m.First_order1'),
          disabled: false
        },
        {
          freeDurationApplyOrderNum: 2,
          label: this.$t('m.First_order2'),
          disabled: false
        },
        {
          freeDurationApplyOrderNum: 3,
          label: this.$t('m.First_order3'),
          disabled: false
        },
        {
          freeDurationApplyOrderNum: 4,
          label: this.$t('m.First_order4'),
          disabled: false
        },
        {
          freeDurationApplyOrderNum: 5,
          label: this.$t('m.First_order5'),
          disabled: false
        }
      ],
      //计费周期期限类型
      selectList3: [
        { controlType: 1, label: this.$t('m.minute'), disabled: true },
        { controlType: 2, label: this.$t('m.hour'), disabled: false },
        { controlType: 3, label: this.$t('m.day2'), disabled: false }
      ],
      selectList4: [
        // { maxDurationControlType: 1, label: this.$t('m.minute'), disabled: true },
        { maxDurationControlType: 2, label: this.$t('m.hour'), disabled: true },
        { maxDurationControlType: 3, label: this.$t('m.day2'), disabled: false }
      ],
      disabled1: false,
      disabled2: false,
      createAuth: this.permissionsId(138)
    }
  },
  created () {
    if (!this.createAuth) {
      return
    }
    if (this.$route.query.id) {
      this.$api.billing.getDetail(this.$route.query.id).then(res => {
        if (this.$ok(res)) {
          this.ruleForm = {
            title: res.data.title,
            freeDuration: res.data.freeDuration,
            freeDurationControlType: res.data.freeDurationControlType,
            freeDurationApplyOrderNum: res.data.freeDurationApplyOrderNum,
            id: res.data.id,
            amount: res.data.amount,
            cycle: res.data.cycle,
            controlType: res.data.controlType,
            dayAmount: res.data.dayAmount,
            maxDurationControlType: res.data.maxDurationControlType,
            maxRentDuration: res.data.maxRentDuration
          }
          this.changeRadio1(res.data)
          this.changeRadio2(res.data)
          this.changeRadio3(res.data)
          this.changeRadio4(res.data)
          this.disabled1 = res.data.freeDuration ? true : false
          // res.data.freeDuration
          //   ? (this.disabled1 = true)
          //   : (this.disabled1 = false)
          this.disabled2 = res.data.dayAmount ? true : false
          // res.data.dayAmount
          //   ? (this.disabled2 = true)
          //   : (this.disabled2 = false)
        }
      })
    } else {
      this.disabled1 = true
      this.disabled2 = true
    }
  },
  // computed: {
  //   penaltyAmount () {
  //     let penaltyAmount
  //     if (this.ruleForm.maxDurationControlType == 2) {
  //       if (this.ruleForm.controlType == 1) {
  //         penaltyAmount =
  //           (this.ruleForm.amount / (this.ruleForm.cycle / 60)) *
  //           this.ruleForm.maxRentDuration
  //       } else if (this.ruleForm.controlType == 2) {
  //         penaltyAmount =
  //           (this.ruleForm.amount / this.ruleForm.cycle) *
  //           this.ruleForm.maxRentDuration
  //       } else {
  //         penaltyAmount =
  //           (this.ruleForm.amount / (this.ruleForm.cycle * 24)) *
  //           this.ruleForm.maxRentDuration
  //       }
  //       return penaltyAmount
  //     } else {
  //       if (this.ruleForm.controlType == 1) {
  //         penaltyAmount =
  //           (this.ruleForm.amount / (this.ruleForm.cycle / 60 / 24)) *
  //           this.ruleForm.maxRentDuration
  //       } else if (this.ruleForm.controlType == 2) {
  //         penaltyAmount =
  //           (this.ruleForm.amount / (this.ruleForm.cycle / 24)) *
  //           this.ruleForm.maxRentDuration
  //       } else {
  //         penaltyAmount =
  //           (this.ruleForm.amount / this.ruleForm.cycle) *
  //           this.ruleForm.maxRentDuration
  //       }
  //       return penaltyAmount
  //     }
  //   }
  // },
  mounted () {},
  methods: {
    changeFree (val) {
      this.ruleForm.freeDuration = this.$check.noZero(val)
      this.disabled1 = this.ruleForm.freeDuration ? true : false
    },
    changeAmount (val) {
      this.ruleForm.amount = this.$check.amount(val)
    },
    changeCycle (val) {
      this.ruleForm.cycle = this.$check.noZero(val)
    },
    changeDayAmount (val) {
      this.ruleForm.dayAmount = this.$check.amount(val)
      this.disabled2 = this.ruleForm.dayAmount ? true : false
    },
    changeMaxRentDuration (val) {
      this.ruleForm.maxRentDuration = this.$check.noZero(val)
    },
    changeRadio1 (items) {
      this.selectList1.forEach(item => {
        item.freeDurationControlType == items.freeDurationControlType
          ? (item.disabled = true)
          : (item.disabled = false)
      })
      this.ruleForm.freeDurationControlType = items.freeDurationControlType
    },
    changeRadio2 (items) {
      this.selectList2.forEach(item => {
        item.freeDurationApplyOrderNum == items.freeDurationApplyOrderNum
          ? (item.disabled = true)
          : (item.disabled = false)
      })
      this.ruleForm.freeDurationApplyOrderNum = items.freeDurationApplyOrderNum
    },
    changeRadio3 (items) {
      this.selectList3.forEach(item => {
        item.controlType == items.controlType
          ? (item.disabled = true)
          : (item.disabled = false)
      })
      this.ruleForm.controlType = items.controlType
    },
    changeRadio4 (items) {
      this.selectList4.forEach(item => {
        item.maxDurationControlType == items.maxDurationControlType
          ? (item.disabled = true)
          : (item.disabled = false)
      })
      this.ruleForm.maxDurationControlType = items.maxDurationControlType
    },
    saveBtn () {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          let params = { ...this.ruleForm }
          // console.log(params)
          this.$api.billing.createModify(params).then(res => {
            if (this.$ok(res)) {
              if (!this.ruleForm.id) {
                this.remPageNum()
              }
              this.$router.go(-1)
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import 'src/style/common';

.container {
  width: 100%;
  min-width: 1000px !important;
  .page-header {
    padding: 20px 0;
  }
  .page-header,
  .create_div {
    width: 100%;
    min-width: 1000px !important;
    max-width: 1000px !important;
  }

  .create_div {
    background: #ffffff;
    border-radius: 10px;
    padding: 24px 52px;
    .create_div_title {
      width: 100%;
      padding: 20px;
      background: #f3f9ff;
      border: 1px dashed var(--text-color);
      border-radius: 5px;
      margin-bottom: 20px;
      .create_div_title1 {
        font-size: 16px;
        font-weight: 600;
        text-align: left;
        color: #39404d;
        line-height: 22px;
        margin-bottom: 8px;
      }
      .create_div_title2 {
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        color: #646b80;
        line-height: 16px;
      }
    }
    .el_form {
      ::v-deep .el-form-item {
        margin-bottom: 20px;
        line-height: 36px;
        display: flex;
        align-items: center;
      }

      ::v-deep .el-form-item__content {
        line-height: 36px;
      }

      ::v-deep .el-input__icon {
        height: 36px;
        line-height: 36px !important;
        font-size: 12px;
      }
      ::v-deep .el-input__inner {
        height: 36px !important;
        border-radius: 4px;
        line-height: 36px;
        font-size: 14px;
        // border: 1px solid #e4e4e6;
        font-weight: 500;
        text-align: left;
        // color: #39404d;
      }
      ::v-deep .el-input__suffix-inner {
        display: flex;
      }

      ::v-deep .el-input__icon {
        line-height: 36px;
        height: 36px;
      }
      .create_form_title1 {
        font-size: 16px;
        font-weight: 600;
        text-align: left;
        color: #39404d;
        line-height: 22px;
        margin-bottom: 12px;
        margin-right: 8px;
      }

      .create_form_title2 {
        display: flex;
        margin-bottom: 12px;
        div {
          font-size: 14px;
          font-weight: 500;
          text-align: left;
          color: #646b80;
          line-height: 16px;
          margin-right: 8px;
        }
      }
      .create_form_usage {
        display: flex;
        margin-bottom: 8px;
        position: relative;
        .usageImg {
          width: 16px;
          height: 16px;
          position: absolute;
          left: -28px;
          top: 2px;
        }
      }
      .select_radio {
        display: flex;
        flex-wrap: wrap;
        .select_radio_div {
          padding: 10px 16px;
          background: #ffffff;
          border: 1px solid #d2d8e2;
          border-radius: 5px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          margin-right: 16px;
          margin-bottom: 20px;
          height: 36px;
          .select_radio_div_text {
            font-size: 14px;
            font-weight: 500;
            text-align: left;
            color: #39404d;
            line-height: 16px;
            margin-right: 10px;
          }
          .select_radio_div_text_active {
            color: var(--text-color) !important;
          }
        }
        .select_radio_active {
          border: 2px solid var(--text-color);
          padding: 9px 15px;
        }
        .select_radio_disable {
          background: #f5f7fa;
          cursor: not-allowed;
        }
      }
      .create_form_fees {
        display: flex;
        ::v-deep .el-form-item__content {
          line-height: 0px;
        }
      }
    }
  }
}

.hitImg {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.create_button {
  margin-top: 20px;
  display: flex;
  justify-content: end;
  width: 100%;
  min-width: 1000px;
  max-width: 1000px;
  z-index: 20;
  position: relative;
  .el_button {
    background: var(--text-color);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
    line-height: 16px;
    border: none;
    padding: 10px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (min-width: 1221px) {
  .container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>
